import React, { PureComponent } from "react";
import { Checkbox } from "antd";
import EchartsMap from "./EchartsMap";
import "./index.less";

export default class Home extends PureComponent {
  state = {
    topData: [],
    leftlist: [],
    rightlist: []
  };

  componentWillMount() {
    // console.log("componentWillMount");
  }
  componentDidMount() {
    this.initData();
    // console.log("componentDidMount");
  }

  initData() {
    this.topData();
    this.leftData();
    this.rightData();
  }

  topData() {
    let objarr = [
      "营运车辆",
      "入网车辆",
      "入网率",
      "当月上线率",
      "当日上线车辆",
      "实时在线车辆",
      "入省车辆",
      "出省车辆"
    ];
    let arr = [];
    objarr.forEach(item => {
      let obj = {};
      obj.title = item;
      obj.num = Math.floor(Math.random() * 1000);
      arr.push(obj);
    });
    this.setState({ topData: arr });
  }

  leftData() {
    let title = ["班线客运", "旅游包车", "危险品运输"];
    let icon = [
      "iconlvyoubaochedingdan",
      "iconlvyoubaoche",
      "iconweixianpinyunshu"
    ];
    let objarr = [
      "营运车辆数",
      "入网车辆数",
      "上线车辆数",
      "实时在线数",
      "出境车辆数",
      "入境车辆数"
    ];
    let list = [];
    title.forEach((item, index) => {
      let obj = {};
      obj.title = item;
      obj.icon = icon[index];
      obj.data = objarr.map(item => {
        let obj1 = {};
        obj1.name = item;
        obj1.num = Math.floor(Math.random() * 1000);
        return obj1;
      });
      list.push(obj);
    });
    this.setState({ leftlist: list });
  }

  rightData() {
    let title = ["行业选择", "平台信息", "今日车辆报警"];
    let icon = [
      "iconhangyexuanze",
      "iconpingtaixinxi",
      "iconjinricheliangbaojing"
    ];
    let objarr1 = ["班车客运", "旅游包车", "危险品运输"];
    let objarr2 = [
      "平台总数",
      "平台在线数",
      "上线车辆数",
      "实时在线数",
      "出境车辆数",
      "入境车辆数"
    ];
    let objarr3 = [
      "超速报警",
      "疲劳报警",
      "紧急报警",
      "入区域报警",
      "出区域报警",
      "偏移路线报警",
      "主动安全报警"
    ];
    let list = [];
    title.forEach((item, index) => {
      let obj = {};
      obj.title = item;
      obj.icon = icon[index];
      obj.data = [];
      if (index === 0) {
        let obj1 = {};
        obj1.ischeckbox = true;
        obj1.name = objarr1;
        obj.data.push(obj1);
      } else if (index === 1) {
        obj.data = objarr2.map(item => {
          let obj1 = {};
          obj1.name = item;
          obj1.num = Math.floor(Math.random() * 1000);
          return obj1;
        });
      } else if (index === 2) {
        obj.data = objarr3.map(item => {
          let obj1 = {};
          obj1.name = item;
          obj1.num = Math.floor(Math.random() * 1000);
          return obj1;
        });
      }
      list.push(obj);
    });
    this.setState({ rightlist: list });
  }

  onChange(e) {
    console.log(e);
  }

  render() {
    const topitem = this.state.topData.map((item, index) => (
      <div className="top-item" key={index}>
        <div className="font-normal font-color-normal title">{item.title}</div>
        <div className="font-large font-color-zhu">{item.num}</div>
      </div>
    ));
    const leftitem = this.state.leftlist.map((item, index) => (
      <div className="left-item" key={index}>
        <div className={[`iconfont ${item.icon} title`]}>
          <span className="font-normal font-color-deep">{item.title}</span>
        </div>
        <div className="item-data-list">
          {item.data.map((item1, number) => {
            return (
              <div
                className="font-small font-color-normal item-data"
                key={number}
              >
                {item1.name} <span>{item1.num}</span>
              </div>
            );
          })}
        </div>
      </div>
    ));
    const rightitem = this.state.rightlist.map((item, index) => (
      <div className="left-item" key={index}>
        <div className={[`iconfont ${item.icon} title`]}>
          <span className="font-normal font-color-deep">{item.title}</span>
        </div>
        <div className="item-data-list">
          {item.data[0].ischeckbox ? (
            <div className="check-class">
              <Checkbox.Group
                options={item.data[0].name}
                defaultValue={["班车客运", "旅游包车", "危险品运输"]}
                onChange={this.onChange}
              />
            </div>
          ) : (
            item.data.map((item1, number) => {
              return (
                <div
                  className="font-small font-color-normal item-data"
                  key={number}
                >
                  {item1.name} <span>{item1.num}</span>
                </div>
              );
            })
          )}
        </div>
      </div>
    ));
    return (
      <div className="container">
        <div className="home-top">{topitem}</div>
        <div className="center-container">
          <div className="left-right-item">{leftitem}</div>
          <div className="center-map">
            <EchartsMap />
          </div>
          <div className="left-right-item">{rightitem}</div>
        </div>
      </div>
    );
  }
}
